import { PlusSquareOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Dropdown, Button } from 'antd';

// 操作类型枚举
export const ACTION_TYPE = {
  DETAILS: 'details',
  UPDATE: 'update',
  DELETE: 'delete',
};

// 菜单 key 枚举
export const MENU_KEY = {
  DETAILS: '1',
  UPDATE: '2',
  DELETE: '3',
};

// 颜色枚举
export const ACTION_COLOR = {
  DETAILS: '#1677ff',
  UPDATE: '#1677ff',
  DELETE: '#ff4d4f',
};

// 封装新建模块
export const useActionTableColumn = (handleMenuClick) => {
  return {
    get title() { return (<div style={{ textAlign: 'center' }}><PlusSquareOutlined /></div>) },
    dataIndex: 'operation',
    key: 'operation',
    width: 100,
    render: (text, record) => {
      const menuItems = [
        {
          label: <span style={{ color: ACTION_COLOR.DETAILS }}>详情</span>,
          key: MENU_KEY.DETAILS,
          onClick: () => handleMenuClick(ACTION_TYPE.DETAILS, record)
        },
        // {
        //   label: <span style={{ color: ACTION_COLOR.UPDATE }}>编辑</span>,
        //   key: MENU_KEY.UPDATE,
        //   onClick: () => handleMenuClick(ACTION_TYPE.UPDATE, record)
        // },
        {
          label: <span style={{ color: ACTION_COLOR.DELETE }}>删除</span>,
          key: MENU_KEY.DELETE,
          onClick: () => handleMenuClick(ACTION_TYPE.DELETE, record)
        }
      ];
      return (
        <div
          style={{ textAlign: 'center' }}
          onClick={(e) => e.stopPropagation()}
        >
          <Dropdown
            menu={{ items: menuItems }}
            trigger={['click']}
            overlayStyle={{
              width: '60px',
            }}
          >
            <Button
              icon={<EllipsisOutlined />}
              size="big"
              style={{ border: 'none' }}
            />
          </Dropdown>
        </div>
      );
    }
  }
}